<template>
  <div class="hotTopic">
    <header>
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      <p>热门话题</p>
      &nbsp;
    </header>
    <main>
      <div class="content" v-for="i in 8" :key="i">
        <div class="left">
          <img
            src="https://img14.360buyimg.com/pop/jfs/t1/64505/17/17538/109338/628fa5efE6ea28019/59e7eff5967cadf1.jpg"
            alt=""
            width="100%"
          />
        </div>
        <div class="right">
          <div>
            <p><strong>眼部整形</strong> <span>今日+7195</span></p>
            <span>手臂吸脂分享</span>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "hotTopic",
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.hotTopic {
  font-size: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    height: 100px;
    border-bottom: 2px solid rgb(167, 167, 167);
    justify-content: space-between;
    align-items: center;
  }
  main {
    flex: 1;
    overflow-y: auto;
    .content {
      width: 100%;
      height: 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      padding: 0 20px 0 0px;
      .left {
        width: 160px;
        height: 160px;
        border-radius: 100%;
        img {
          border-radius: 100%;
        }
      }
      .right {
        width: 520px;
        height: 180px;
        // background-color: yellow;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #ddd;
        padding-right: 20px;
        div {
          p {
            margin-bottom: 10px;
          }
          span {
            font-size: 20px;
            color: rgb(167, 167, 167);
          }
        }
      }
    }
  }
}
</style>